<template>
	<view class="page">
		<view>
			<tpf-input class="input consignee" leftTitle="收货人" placeholder="请填写收货人姓名" :clearIcon="clearIconConfig" :rightIcon="{fontFamily: 'tpf-iconfont', text: '\ue735'}" :value="consignee" @input="consigneeInput" @rightIconTap="addConsigneeBtnTap"></tpf-input>
			
			<tpf-input class="input" type="number" leftTitle="手机号码" placeholder="请填写收货人手机号码" :clearIcon="clearIconConfig" :value="mobile" @input="phoneInput"></tpf-input>
			<view>
				<tpf-pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
					<tpf-input class="input" leftTitle="所在地区" placeholder="请选择省市区" :clearIcon="clearIconConfig" :value="regionName"></tpf-input>
				</tpf-pick-regions>
				<!-- <h3>{{regionName}}</h3> -->
			</view>
			<tpf-input class="input detail-address" textarea leftTitle="详细地址" placeholder="街道/楼牌号等" :clearIcon="clearIconConfig" @input="addressInput" :value="address"></tpf-input>
		</view>
		
		<view class="address-tag-section">
			<text class="address-tag-section-title">标签</text>
			<view class="tag-list">
				<view class="default-tag-list">
					<view v-for="(tag, tagIndex) of defaultTagList" :key="tagIndex" class="tag-common" :class="currentTag === tag ? 'selected-tag' : 'tag'" @tap="tagTap(tag)">
						<text class="tag-common-text" :class="currentTag === tag ? 'selected-tag-text' : 'tag-text'">{{tag}}</text>
					</view>
				</view>
				<view class="custom-tag-section">
					<view v-if="showCustomTagAddBtn" class="tag-common" @tap="customTagAddBtnTap">
						<text  class="tag-common-text custom-tag-plus-icon" :style="{'font-family': 'tpf-iconfont'}">&#xe608;</text>
					</view>
					<view v-if="showCustomTag" class="custom-tag">
						<view class="custom-tag-common-text-wrap" :class="customTag === currentTag ? 'selected-custom-tag-text-wrap' : 'custom-tag-text-wrap'"  @tap="tagTap(customTag)">
							<text class="custom-tag-text-common" :class="customTag === currentTag ? 'selected-custom-tag-text' : 'custom-tag-text'">{{customTag}}</text>
						</view>
						<view class="tag-edit-btn-common" :class="customTag === currentTag ? 'selected-tag-edit-btn' : 'tag-edit-btn'">
							<text class="tag-edit-btn-text-common" @tap="tagEditBtnTap">编辑</text>
						</view>
					</view>
					<view v-if="showCustomTagInput" class="tag-input-section">
						<input class="tag-input" type="text" placeholder-class="tag-input-placeholder-class" placeholder="请输入标签名称,最多5个字" :value="customTag" @input="customTagInputChang"/>
						<view class="tag-comfirm-btn">
							<text class="tag-comfirm-btn-text" @tap="tagConfirmBtnTap">确定</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="default-address">
			<view class="default-address-label">
				<text class="default-address-label-title">设为默认地址</text>
				<text class="default-address-label-subtitle">提醒：每次下单会默认推荐使用该地址</text>
			</view>
			<switch class="default-address-switch" :checked="is_default" @change="defaultAddressSwitchChange" />
		</view>
		
		<view class="save-btn-section">
			<view class="save-btn" @tap="saveBtnTap">
				<text class="save-btn-text">保存</text>
			</view>
		</view>
		
	</view>
</template>

<script> 
	import initConfig from '@/mixins/ucenter/address/edit-address.js';
	const customData = {
		type: '', //判断是新增地址还是编辑地址
	};
	
	export default {
		mixins: [initConfig],
		data() {
			return {
				trigger:"",
				product_id:0,
				
				address_str:"",
				region:[],
				defaultRegion:['广东省','广州市','番禺区'],
				defaultRegionCode:'',
				showCustomTagAddBtn: true,
				showCustomTagInput: false,
				showCustomTag: false,
				customTag: '',
				currentTag: '',
				consignee: '',
				mobile: '',
				address: '',
				is_default: false,
				postData:{
					consignee: '',
					mobile: '',
					address: '',
					is_default: 0,
				}
			}
		},
		onLoad(address) {
			customData.type = address.type;
			
			this.trigger = address.trigger || "";
			this.product_id = address.product_id || 0;
			
			if (customData.type === 'edit') {
				uni.setNavigationBarTitle({title: '编辑收货地址'});
				
				this.defaultRegionCode = address.district;
				this.consignee = address.consignee;
				this.mobile = address.mobile;

				this.$set(this.postData,"id",address.id);
				this.postData.consignee = address.consignee;
				this.postData.mobile = address.mobile;
				this.postData.address = address.address;
				
				address.address.slice(0,address.address.indexOf(" ")).split("-").forEach(item=>{
					this.region.push({name:item});
				});
				
				this.address_str = address.address.slice(0,address.address.indexOf(" "));
				
				this.address = address.address.slice(address.address.indexOf(" ")).trim();
				
				this.is_default = address.is_default == 1 ? true : false;
				this.postData.is_default = address.is_default == 1 ? 1 : 0;
				
				if (this.defaultTagList.indexOf(address.tag) === -1) {
					if (address.tag !== 'undefined' && typeof(address.tag) !== 'undefined') {
						this.customTag = address.tag;
						this.currentTag = address.tag;
					}
				} else {
					this.currentTag = address.tag;
				}				
			} else {
				uni.setNavigationBarTitle({title: '新增收货地址'});
			}
		},
		watch:{
			address_str:function(val){
				this.postData.address = val+" "+this.address;
			},
			address:function(val){
				this.postData.address = this.address_str+" "+val;
			}
		},
		computed: {
			defaultTagListCount() {
				return this.defaultTagList.length;
			},
			tagConfirmBtnDisabled() {
				return this.customTag.length === 0 ? true : false;
			},
			regionName(){
				// 转为字符串
				return this.region.map(item=>item.name).join(' ');
			}
		},
		methods: {
			addConsigneeBtnTap() {
				
			},
			customTagAddBtnTap() {
				this.showCustomTagAddBtn = false;
				this.showCustomTagInput = true;
			},
			customTagInputChang(e) {
				this.customTag = e.detail.value;
			},
			
			tagTap(tag) {
				this.currentTag = tag;
			},
			tagConfirmBtnTap() {
				if (!this.tagConfirmBtnDisabled) {
					this.showCustomTag = true;
					this.showCustomTagInput = false;
					this.currentTag = this.customTag;
				}
			},
			tagEditBtnTap() {
				this.showCustomTag = false;
				this.showCustomTagInput = true;
				console.log('aa');
			},
			consigneeInput(e){
				this.postData.consignee = e.detail.value;
			},
			phoneInput(e){
				this.postData.mobile = e.detail.value;
			},
			addressInput(e){
				this.address = e.detail.value;
			},
			defaultAddressSwitchChange(e) {
				this.postData.is_default = e.detail.value?1:0;
			},
			saveBtnTap() {
				
				this.$Helper.tpfJump({url:"/pages/ucenter/address/address?trigger="+this.trigger+"&product_id="+this.product_id,type:"redirectTo"});
				
			},
			// 获取选择的地区
			handleGetRegion(region) {
				this.address_str = region.map(item=>item.name).join('-');
				this.region = region;
			}
		},
	}
</script>

<style lang="scss">
	$tag-height: 54rpx;
	
	.page {
		background-color: $uni-bg-color;
	}
	.input {
		padding-top: $uni-spacing-row-base;
		padding-bottom: $uni-spacing-row-base;
		padding-right: $uni-spacing-col-base;
		margin-left: $uni-spacing-col-base;
		border-top-width: 0.5px;
		border-color: $uni-border-color;
	}
	.consignee {
		padding-left: $uni-spacing-col-base;
		margin-left: 0;
	}
	.detail-address {
		border-bottom-width: 0.5px;
		border-color: $uni-border-color;
	}
	
	.address-tag-section {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		// align-items: center;
		margin-top: $uni-spacing-row-base;
	}
	.address-tag-section-title {
		font-size: $uni-font-size-base;
		width: 160rpx;
		margin-left: $uni-spacing-col-base;
	}
	.tag-list {
		flex: 1;
		// border-width: 1px;
	}
	.default-tag-list {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		// flex-wrap: wrap;
		// height: 100px;
	}
	.custom-tag-section {
		// border-width: 1px;
		// height: 100px;
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}
	.custom-tag-plus-icon {
		font-size: $uni-font-size-sm;
		font-weight: bold;
	}
	.custom-tag {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		margin-bottom: $uni-spacing-row-base;
	}
	.custom-tag-common-text-wrap {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		
		border-top-left-radius: 10000px;
		border-bottom-left-radius: 10000px;
		border-width: 0.5px;
		border-color: $uni-border-color;
		height: $tag-height;
		padding-left: $uni-spacing-col-lg;
		padding-right: $uni-spacing-col-lg;
		
	}
	.custom-tag-text-wrap {
		
	}
	.selected-custom-tag-text-wrap {
		background-color: $uni-bg-color-blue;
	}
	
	.custom-tag-text-common {
		font-size: $uni-font-size-base;
	}
	.custom-tag-text {
		
	}
	.selected-custom-tag-text {
		color: $uni-text-color-white;
	}
	.tag-edit-btn-common {
		padding-left: $uni-spacing-col-base;
		padding-right: $uni-spacing-col-base;
		border-top-right-radius: 10000px;
		border-bottom-right-radius: 10000px;
		border-width: 0.5px;
		border-color: $uni-border-color;
		margin-left: 0.5px;
		height: $tag-height;
		
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}
	.tag-edit-btn {
		background-color: $uni-bg-color-black;
	}
	.selected-tag-edit-btn {
		background-color: $uni-bg-color-blue;
	}
	.tag-edit-btn-text-common {
		font-size: $uni-font-size-base;
		color: $uni-text-color-white;
	}
	
	.tag-input-section {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		margin-bottom: $uni-spacing-row-base;
	}
	.tag-input {
		// flex: 1;
		background-color: $uni-bg-color-grey;
		font-size: $uni-font-size-sm;
		border-top-left-radius: 10000px;
		border-bottom-left-radius: 10000px;
		width: 400rpx;
		height: $tag-height;
		padding-left: $uni-spacing-col-base;
		padding-right: $uni-spacing-col-base;
	}
	.tag-input-placeholder-class {
		padding-right: $uni-spacing-col-base;
	}
	.tag-comfirm-btn {
		background-color: $uni-bg-color-red;
		border-top-right-radius: 10000px;
		border-bottom-right-radius: 10000px;
		height: $tag-height;
		padding-left: $uni-spacing-col-base;
		padding-right: $uni-spacing-col-base;
		
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}
	.tag-comfirm-btn-text {
		font-size: $uni-font-size-base;
		color: $uni-text-color-white;
	}
	
	.tag-common {
		// flex-shrink: 0;
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		
		// white-space: nowrap;
		
		border-width: 0.5px;
		border-style: solid;
		border-color: $uni-border-color;
		border-radius: 10000px;
		height: $tag-height;
		
		padding-left: $uni-spacing-col-lg;
		padding-right: $uni-spacing-col-lg;
		margin-right: $uni-spacing-col-base;
		margin-bottom: $uni-spacing-row-base;
	}
	.tag-common-text {
		// border-width: 1px;
		font-size: $uni-font-size-base;
	}
	.selected-tag {
		background-color: $uni-bg-color-blue;
	}
	.selected-tag-text {
		color: $uni-text-color-white;
	}
	
	.default-address {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: $uni-spacing-row-lg;
		// margin-left: $uni-spacing-col-base;
		padding-bottom: $uni-spacing-row-base;
		padding-right: $uni-spacing-col-base;
		padding-left: $uni-spacing-col-base;

		border-left-width: 0px;
		border-right-width: 0px;
		border-top-width: 0.5px;
		border-bottom-width: 0.5px;
		border-style: solid;
		border-color: $uni-border-color;
	}
	.default-address-label {
		
	}
	.default-address-label-title {
		font-size: $uni-font-size-base;
	}
	.default-address-label-subtitle {
		font-size: $uni-font-size-sm;
		margin-top: $uni-spacing-row-base;
	}
	.default-address-switch {
		transform: scale(0.7);
	}
	
	.save-btn-section {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.save-btn {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		
		width: 500rpx;
		height: 80rpx;
		background-color: $uni-bg-color-red;
		border-radius: 10000px;
		margin-bottom: $uni-spacing-row-base;
	}
	.save-btn-text {
		color: $uni-text-color-white;
		font-size: $uni-font-size-base;
	}
</style>
